<template>
  <Upload
    v-model:file-list="fileList"
    :maxCount="1"
    :beforeUpload="handleBeforeUpload"
    @remove="handleRemove"
  >
    <Button type="primary">选择文件</Button>
  </Upload>
</template>

<script lang="ts" setup>
  import { Upload, Button } from 'ant-design-vue';
  import { ref } from 'vue';
  const emits = defineEmits(['update:modelValue', 'change']);

  const fileList = ref([]);

  function handleBeforeUpload(file: File) {
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.addEventListener('load', () => {
      emits('update:modelValue', reader.result);
      emits('change', reader.result, file.name);
    });
    return false;
  }

  const handleRemove = () => {
    emits('update:modelValue', null, null);
  };
</script>
